<script setup lang="ts">
import { ElMessage } from 'element-plus'
import { onMounted, reactive, ref } from 'vue'
import formView from '../component/formView.jsx'
const data = reactive({
  list: ['one', 'two', 'three', 'four', 'five', 'six'],
  dragList: [], //左侧表结构
  wdList: [
    {
      name: '文件夹1',
      data: [
        {
          type: 'String',
          name: '学科'
        },
        {
          type: 'Number',
          name: '课程id'
        }
      ]
    },
    {
      name: '文件夹2',
      data: [
        {
          type: 'String',
          name: '课程教师'
        },
        {
          type: 'Number',
          name: '课程类别'
        }
      ]
    }
  ],
  dlList: [],
  isViewData: false, //查看模型/数据切换
  drawer: false //批量编辑字段-抽屉
})
//开始拖动 set一个item值
const fileDragStart = (event, item) => {
  event.dataTransfer.setData('item', item)
}
//进入可拖动区域
const drop = (event) => {
  if (data.dragList.length === 1)
    ElMessage({
      message: '暂不支持多表关联',
      type: 'warning'
    })
  else data.dragList.push(event.dataTransfer.getData('item'))
}
//拖动完成 清除set进去的值
const dragend = (event) => {
  event.dataTransfer.clearData()
}
//删除已拖动的值
const deldetChange = (index) => {
  data.dragList = []
}
//切换数据/模型
const viewData = () => {
  data.isViewData = !data.isViewData
}
//抽屉关闭的回调
const handleClose = (done) => {
  done()
}
onMounted(() => {})
</script>
<template>
  <div class="model_main">
    <div class="model_header">
      <div class="header_left">
        <svg-icon name="main_gods" color="#333"></svg-icon>
        <span>Zeus BI</span>
      </div>
    </div>
    <div class="model_left">
      <div
        class="item"
        :id="`drop${index + 1}`"
        v-for="(item, index) in data.list"
        :key="index"
        draggable="true"
        @dragstart="fileDragStart($event, item)"
        @dragend="dragend"
      >
        {{ item }}
      </div>
    </div>
    <div class="model_right">
      <div class="right_back">
        <div class="right_top" draggable="true" @drop="drop" @dragover.prevent>
          <div class="item" v-for="(item, index) in data.dragList" :key="index">
            <span>{{ item }}</span>
            <svg-icon name="delete" color="#333" @click="deldetChange(index)"></svg-icon>
          </div>
        </div>
      </div>
      <div class="right_bottom">
        <div class="bottom_header">
          <div class="header_left">
            <span @click="viewData">{{ data.isViewData ? '查看模型' : '查看数据' }}</span>
            <span @click="data.drawer = true">批量编辑字段</span>
          </div>
          <div class="header_right">
            <span>数据脱敏</span>
            <span>同步表结构</span>
          </div>
        </div>
        <formView v-if="data.isViewData"></formView>
        <div class="bottom_body" v-else>
          <!-- 维度 -->
          <div class="class_dimension">
            <p>维度</p>
            <div v-for="(item, index) in data.wdList" :key="index" class="folder">
              <div class="folder_name">
                <svg-icon name="folder_up" color="#4c8dd8"></svg-icon>
                {{ item.name }}
              </div>
              <div v-for="(item, index) in item.data" :key="index" class="folder_item">
                <svg-icon :name="item.type" color="#4c8dd8"></svg-icon>
                {{ item.name }}
              </div>
            </div>
          </div>
          <!-- 度量 -->
          <div class="class_measure">
            <p>度量</p>
          </div>
        </div>
      </div>
    </div>
    <el-drawer
      v-model="data.drawer"
      title="批量编辑字段"
      direction="rtl"
      :before-close="handleClose"
      size="90%"
    >
      <span>Hi, there!</span>
    </el-drawer>
  </div>
</template>
<style lang="scss" scoped>
</style>
<style scoped lang="scss">
.model_main {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  .model_header {
    width: 100%;
    height: 58px;
    background-color: #322f51;
    display: flex;
    align-items: center;
    .header_left {
      width: 10%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      .svg-icon {
        width: 40px;
        height: 40px;
        margin-right: 20px;
      }
      span {
        color: white;
        font-weight: 700;
        font-size: 22px;
        font-family: "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
      }
    }
  }
  .model_left {
    width: 10%;
    height: calc(100% - 58px);
    border-right: 2px solid #3a3a40;
    box-sizing: border-box;
    padding: 20px 20px;
    .item {
      height: 30px;
      line-height: 30px;
      width: 100%;
      padding: 2px;
      text-align: left;
      border-radius: 5px;
      cursor: move;
      &:hover {
        background-color: #108cee;
        color: white;
      }
    }
  }
  .model_right {
    flex: 1;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    .right_back {
      background-color: #ebebeb;
      width: 100%;
      height: 200px;
      padding: 8px;
      .right_top {
        background-color: white;
        height: 100%;
        padding: 20px;
        box-sizing: border-box;
        .item {
          width: 150px;
          height: 34px;
          line-height: 34px;
          padding: 0 10px 0 20px;
          text-align: left;
          border: 1px solid #dedede;
          background-color: #f1f1f1;
          position: relative;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .icon-delete {
            display: none;
          }
          &:hover {
            .icon-delete {
              display: inline-block;
              cursor: pointer;
            }
          }
          &::before {
            position: absolute;
            content: '';
            top: 0;
            left: 0;
            width: 1px;
            height: 100%;
            background-color: #108cee;
          }
        }
      }
    }
    .right_bottom {
      width: 100%;
      height: calc(100% - 200px);
      box-sizing: border-box;
      background-color: white;
      .bottom_header {
        width: 100%;
        height: 30px;
        display: flex;
        justify-content: space-between;
        padding: 0 8px;
        span {
          margin-right: 20px;
          font-size: 14px;
          cursor: pointer;
          -webkit-user-select: none;
          -moz-user-select: none;
          -ms-user-select: none;
          user-select: none;
        }
        .header_left {
          -webkit-user-drag: none;
          line-height: 30px;
          span {
            color: #108cee;
          }
        }
        .header_right {
          -webkit-user-drag: none;
          line-height: 30px;
        }
      }
      .bottom_body {
        width: 100%;
        height: calc(100% - 30px);
        display: flex;
        flex-wrap: wrap;
        p {
          width: 100%;
          height: 26px;
          background-color: #f0f3f4;
          border: 1px solid #ccc;
          padding: 0 8px;
          text-align: left;
          font-size: 12px;
          line-height: 26px;
          &:first-child {
            border-right: none;
          }
        }
        .class_dimension {
          width: 50%;
          height: 100%;
          text-align: left;
          .folder {
            padding: 0 8px;
            font-size: 13px;
            .folder_name {
              height: 28px;
              line-height: 28px;
              display: flex;
              align-items: center;
              .svg-icon {
                width: 20px;
                height: 20px;
              }
            }
            .folder_item {
              height: 28px;
              margin-left: 20px;
              .svg-icon {
                width: 18px;
                height: 18px;
              }
            }
          }
        }
        .class_measure {
          width: 50%;
          height: 100%;
        }
      }
    }
  }
}
</style>